<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>插件使用示例</title>
<d:script id="jquery,om-ui" />
<d:script path="/static/om-ui/operamasks-ui-plugin.js" />
<d:css id="om-ui" />

<script type="text/javascript">
	$(document).ready(function() {
		initUI({
			"tree1" : {
				dataSource : [ {
					"text" : "node1",
					"children" : [ {
						"text" : "node11"
					}, {
						"text" : "node12"
					} ]
				}, {
					"text" : "node2",
					"expanded" : true,
					"children" : [ {
						"text" : "node21",
						"expanded" : true,
						"children" : [ {
							"text" : "node211"
						}, {
							"text" : "node212"
						} ]
					}, {
						"text" : "node22"
					} ]
				}, {
					"text" : "node3"
				}, {
					"text" : "node4"
				} ]
			},
			"tree2":{
				dataSource:[{id:"n1",text:"品牌",expanded:true},
		                     {id:"n2",text:"运营商",expanded:true},
		                     {id:"n11",pid:"n1",text:"三星"},
					         {id:"n12",pid:"n1",text:"诺基亚"},
					         {id:"n13",pid:"n1",text:"摩托罗拉"},
					         {id:"n14",pid:"n1",text:"索尼"},
					         {id:"n21",pid:"n2",text:"移动"},
					         {id:"n22",pid:"n2",text:"联通"},
					         {id:"n23",pid:"n2",text:"电信"}]
			}
		});
	});
	
	function getUrl(){
		var selected = tree3.getSelected();
		if(!selected){
			alert("请先选择tree3的结点1_1");
		}
		alert("url: " + selected.attr("url"));
	}
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
	<button class="ui-button" label="测试tree3的附加属性" onClick="getUrl"></button>
	<div style=""></div>
	<div class="ui-tree" style="float:left;width:300px;" id="tree1"></div>
	<div class="ui-tree" style="float:left;width:300px;" id="tree2" simpleDataModel="true"></div>
	<div class="ui-tree" style="float:left;width:300px;" id="tree3">
		<div class="ui-tree-model">
			<span text="结点1" expanded="true" icon="${ctx }/static/icons/help.png">
				<span text="结点1_1(百度)" url="http://www.baidu.com" expanded="true" icon="${ctx }/static/icons/help.png"></span>
				<span text="结点1_2" expanded="true" icon="${ctx }/static/icons/edit_add.png"></span>
			</span>
			<span text="结点2">
				<span text="结点2_1"></span>
				<span text="结点2_2"></span>
			</span>
			<span text="结点3">
				<span text="结点3_1"></span>
				<span text="结点3_2"></span>
			</span>
		</div>
	</div>

</body>
</html>